<template>
	<view class="main">
		<view class="title">品质园区</view>
		<view class="img" v-for="(item,index) in park" :key="index" >
			<image :src="item.listImage" class="img"></image>
			<view class="text">{{item.baseTitle}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				   park: []
				      , baseTitle: ''
				      , page: 0
			}
		},
		   mounted() {
		    this.getPark()
		  },

		methods: {
			     goDetail(id) {
			      this.$emit('goDetail', id)
			    }
			    , async getPark(page) {
			      if (page) {
			        this.page = page
			      } else {
			        this.page++
			      }
			let res = await this.$req({
				url: `/palm_peninsula/park/queryByBasic`,
				method:'get',
				data:{
					page: this.page, limit: -1, sortField: 'create_time', baseTitle: this.baseTitle
				}
			})
			      if (res.code == 200) {
			        if (this.page == 1) {
			          this.park = []
			        }
			        this.park = this.park.concat(res.data)
			      }
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: white;
		align-items: flex-start;
	}
	.title{
		margin-left: 42rpx;
		margin-top: 60rpx;
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 48rpx;
	}
	.img{
		margin-top: 16rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		width: calc(100% - 48rpx);
		height: 800rpx;

		border-radius: 4rpx;
		position: relative;
	}
	.text{
		position: absolute;
		bottom: 48rp;
		left: 24rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	
</style>
